<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="12">
        <el-form-item label="日期" prop="gdate">
          <el-date-picker
            v-model="formData.gdate"
            type="date"
            placeholder="日期"
            value-format="yyyy-MM-dd"
          /></el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="kc" prop="kc">
          <el-input v-model="formData.kc" type="number" placeholder="kc" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="灌溉下限" prop="wc_min">
          <el-input v-model="formData.wc_min" type="number" placeholder="灌溉下限">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="灌溉上限" prop="wc_max">
          <el-input v-model="formData.wc_max" type="number" placeholder="灌溉上限">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="湿润层深度" prop="soil_depth">
      <el-input v-model="formData.soil_depth" type="number" placeholder="湿润层深度">
        <template slot="append">cm</template>
      </el-input>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="土壤含水率" prop="water_content">
          <el-input v-model="formData.water_content" type="number" placeholder="土壤含水率">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="ETc" prop="water_consum">
          <el-input v-model="formData.water_consum" type="number" placeholder="ETc">
            <template slot="append">mm</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
      <el-button @click="reset('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            id: +this.formData.id,
            kc: this.formData.kc,
            wc_max: this.formData.wc_max,
            wc_min: this.formData.wc_min,
            soil_depth: this.formData.soil_depth,
            water_consume: this.formData.water_consume,
            water_content: this.formData.water_content
          }
          this.$emit('submit', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
